<!--
 * @Author: Michael丶Yao 825862865@qq.com
 * @Date: 2024-11-19 20:46:23
 * @LastEditors: yao
 * @LastEditTime: 2025-02-18 14:58:33
 * @FilePath: \jdev-web-el\src\Layouts\Login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="login_page flex items-center">
    <div class=" flex justify-center items-stretch m-auto">
      <div class="bg-[#ffffffb3] p-10 w-[500px] rounded-l">
        <div class="mb-10"><i style="font-size: 3.5rem;" class="pi pi-vimeo"></i></div>
        <div class="font-medium mb-4 text-xl">让智慧医疗触手可及</div>
        <div class="mb-10 text-opacity-100"
          style="color:  color-mix(in srgb,var(--p-surface-600) calc(100%),transparent);">做人民满意、客户信赖的卫生健康的信息化领军企业</div>
        <ul>
          <li v-for="item in des" class="flex items-start mb-6">
            <span class=" bg-primary w-8 h-8 rounded-lg justify-center flex items-center">
              <el-icon>
                <CircleCheck />
              </el-icon>
            </span>
            <div class="ml-4">
              <div class="font-medium text-lg">{{ item.title }}</div>
              <div style="color:  color-mix(in srgb,var(--p-surface-600) calc(100%),transparent);"
                class="text-opacity-100 leading-normal mt-2">
                {{ item.desc }}</div>
            </div>

          </li>
        </ul>
      </div>
      <div class="bg-white p-10  w-[500px] rounded-r">
        <div class="font-bold mb-8 text-2xl leading-[3.5rem]">智慧入口</div>
        <el-form size="large" ref="ruleFormRef" :rules="rules" label-position="top" :model="form"
          @keyup.enter="onFormSubmit(ruleFormRef)">
          <el-form-item label="账号" prop="account">
            <el-input v-model="form.account" placeholder="请输入账号">
              <template #prefix>
                <el-icon>
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" placeholder="请输入密码" show-password v-model="form.password">
              <template #prefix>
                <el-icon>
                  <User />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="validCode">
            <div class="flex items-center">
              <el-input v-model="form.validCode" placeholder="请输入验证码"></el-input>
              <img :src="verifyCodPicUrl" @click="refreshCode"
                class="cursor-pointer w-100px h-100% flex items-center ml-4" />
            </div>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loginLoading" @click="onFormSubmit(ruleFormRef)" type="primary"
              class="w-full mt-2">登录</el-button>
          </el-form-item>
        </el-form>
        <div style="color:color-mix(in srgb,var(--p-surface-600) 100%,transparent)"
          class="text-center mt-12 leading-normal text-opacity-100">没有账号？
          <a text-opacity-100 style="color:color-mix(in srgb,var(--p-primary-color) calc(100%),transparent)"
            class="font-medium cursor-pointer">前往注册</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, onMounted, reactive } from 'vue'
import { verifyCode } from '@/api/user';
import { useUserStore } from '@/stores/modules/user';
import { useRouter } from 'vue-router';
import { Lock, User } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus';
import smCrypto from '@/utils/crypto';
const userStore = useUserStore()
const router = useRouter()
const verifyCodPicUrl = ref<string>("");
const loginLoading = ref(false)
const ruleFormRef = ref<FormInstance>()
const des = ref([
  {
    title: '创新',
    desc: '作为一颗即将崛起的新兴公司，创业是我们的首要核心价值观。'
  },
  {
    title: '协作',
    desc: '作为一颗即将崛起的新兴公司，创业是我们的首要核心价值观。'
  },
  {
    title: '高效',
    desc: '作为一颗即将崛起的新兴公司，创业是我们的首要核心价值观。'
  }
])
const rules = reactive<FormRules<any>>({
  name: [
    { required: true, message: '账号不可为空', trigger: 'blur' },
  ],
  pwd: [
    { required: true, message: '密码不可为空', trigger: 'blur' },
  ],
  validCode: [
    { required: true, message: '验证码不可为空', trigger: 'blur' },
  ]
})
onMounted(() => {
  getVerifyCode()
})
const getVerifyCode = () => {
  verifyCode().then(res => {
    if (res.code === 200) {
      verifyCodPicUrl.value = res.data.validCodeBase64
      form.value.validCodeReqNo = res.data.validCodeReqNo
    }
  })
}
const form = ref({
  account: 'superAdmin',
  password: '123456',
  validCodeReqNo: '',
  validCode: '',
  device: ''
});
const refreshCode = () => {
  getVerifyCode();
}

const onFormSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      loginLoading.value = true
      userStore.loginHandler({
        account: form.value.account,
        password: smCrypto.doSm2Encrypt(form.value.password),
        validCode: form.value.validCode,
        validCodeReqNo: form.value.validCodeReqNo
      }).then(res => {
        router.push('/')
        loginLoading.value = false
      })
    }
  })
};



</script>
<style scoped lang='scss'>
.login_page {
  height: 100vh;
  width: 100%;
}
</style>